<template>
	<!-- #ifndef MP-WEIXIN -->
	<view class="swiper-3d" :style="{width: canvasWidth+'px',height:canvasHeight+'px'}">
		<swiper :style="{width: '100%',height:canvasHeight+'px'}" :circular="true">
			<swiper-item v-for="(item,index) in  imgbox" :key="index">
				<view class="swiper-item" :style="{width: canvasWidth+'px',height:canvasHeight+'px'}">
					<canvas :ref="`firstCanvas${index}`" :style="{width: canvasWidth+'px',height:canvasHeight+'px'}"
						:canvas-id="`firstCanvas${index}`" @longtap="saveImgToLocal(index)"></canvas>
				</view>
			</swiper-item>
		</swiper>
		<yz-qr ref="qrPath" :text="qrtext" :size="size" :colorDark="colorDark" @getQrPath="getQrPath"
			:colorLight="colorLight"> </yz-qr>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<view class="" :style="'height:'+scrollheight+'px;'">
		<uqrcode ref="uqrcode" style="position: fixed; top:-1000px;" canvas-id="qrcode" size="120" :value="text"
			:options="{ margin: 0 }">
		</uqrcode>
		<r-canvas v-if='ercode!=""' ref="rCanvas" style="position: fixed; top:-1000px;"></r-canvas>
		<image :src="imageurl" mode="" style="width: 100%;height: 100%;" @longpress="longpress"></image>
	</view>
	<!-- #endif -->
</template>
<script>
	// #ifndef MP-WEIXIN

	import yzQr from "@/pageA/components/yz-qr/yz-qr.vue"
	export default {
		components: {
			yzQr
		},
		data() {
			return {
				imgbox: [],
				imgSrc: '',
				canvasQrPath: "",
				qrtext: '',
				size: 180,
				codeImg: "",
				colorDark: '#000000',
				colorLight: '#ffffff',
				list: [],
				canvasHeight: 0,
				canvasWidth: 0,
				canvasimg: ''
			};
		},
		onReady() {
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					this.qrtext = res.data
					this.canvasQrPath = this.$fun.baseUrl() + res.data
				}
			})
		},
		onLoad(Option) {
			this.qrtext = Option.qrtext
			this.canvasQrPath = this.$fun.baseUrl() + Option.qrtext

			this.$fun.ajax.post('/config/invitation', {}).then(res => {
				if (res.code == 1) {
					let data = []
					res.data.forEach((item) => {
						data.push(this.$fun.imgUrl(item.image))
					})
					this.imgbox = data
					this.list = res.data
				}
			})
			// #ifdef H5  || APP-PLUS
			this.getQrPath()
			// #endif
			this.getQrPath()
			// // #ifdef MP-WEIXIN
			// this.getaccesstoken()
			// // #endif
		},
		methods: {
			// 获取token
			getaccesstoken() {
				let that = this
				that.$fun.ajax.post('/user/miniImage', {}).then(res => {
					uni.getImageInfo({
						src: that.$fun.imgUrl(res.data),
						success(res) {

							that.codeImg = res.path
							that.drawImage()
						}
					})
				})
			},
			/**
			 * @param {Object} shareToken
			 */
			getWxCode(shareToken) { //获取小程序码
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.request({
					url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${shareToken}`,
					method: "POST",
					data: {
						width: 300,
						page: 'pages/public/login',
						scene: uni.getStorageSync('userInfo').id,
					},
					responseType: 'arraybuffer',
					success: function(res) {
						uni.hideLoading();
						let src = uni.arrayBufferToBase64(res.data);
						that.codeImg = 'data:image/png;base64,' + src;

					}
				})
			},
			// 绘制二维码  H5
			getQrPath(tempFilePath) {
				// this.text =
				// `${this.$fun.baseUrl()}#/pages/user/public/register.vue?invitation=${uni.getStorageSync('userinfo').invitation}`
				var that = this;
				that.canvasQrPath = tempFilePath
				that.drawImage()
				// setTimeout(function() {
				// 	that.$refs.batchQRCode.toTempFilePath({
				// 	  success: res => {
				// 		   that.canvasQrPath = res.tempFilePath
				// 		   that.drawImage()
				// 	  },
				// 	  fail: err => {
				// 	    uni.showToast({
				// 	      icon: 'none',
				// 	      title: JSON.stringify(err)
				// 	    })
				// 	  }
				// 	})
				// }, 800)
			},
			// 保存图片
			saveImgToLocal(index) {
				let that = this
				uni.canvasToTempFilePath({
					canvasId: `firstCanvas${index}`,
					quality: 1,
					success: function(res1) {
						this.canvasimg = res1.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: res1
								.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败",
									icon: "none"
								});
							}
						});

					}
				}, this)
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定保存到相册吗',
				// 	success: (res) => {
				// 		if (res.confirm) {

				// 		} else if (res.cancel) {

				// 		}
				// 	}
				// });
			},
			// 画图
			drawImage() {
				var that = this;
				for (let i = 0; i < this.imgbox.length; i++) {
					that.canvasHeight = uni.getSystemInfoSync().windowHeight
					that.canvasWidth = uni.getSystemInfoSync().windowWidth

					uni.getImageInfo({
						src: this.imgbox[i],
						success(res) {
							let ctx = uni.createCanvasContext(`firstCanvas${i}`) // 使用画布创建上下文 图片
							ctx.drawImage(res.path, 0, 0, that.canvasWidth,
								that.canvasHeight) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							ctx.drawImage(res.path, 0, 0, that.canvasWidth,
								that.canvasHeight) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							// x y
							let x = that.canvasWidth * (that.list[i].x_axis_bl);
							let y = that.canvasHeight * (that.list[i].y_axis_bl);
							let x1 = x - 5;
							let y1 = that.canvasHeight * (that.list[i].y_axis_bl) + that.list[i]
								.qr_height + 5;
							// 起始点
							ctx.moveTo(x - 5, y - 5)
							// 02 划线  坐标
							ctx.lineTo(x1, y1)
							ctx.lineTo(x + that.list[i].qr_width + 5, y1)
							ctx.lineTo(x + that.list[i].qr_width + 5, y - 5)
							ctx.lineTo(x1, y - 5)
							// 以上两行代码只是一个路径，但还没有绘制
							// 03 绘制
							ctx.fillStyle = "#FFFFFF"
							ctx.fill();

							// #ifdef MP-WEIXIN
							ctx.drawImage(that.codeImg, that.canvasWidth * (that.list[i].x_axis_bl),
								that.list[i]
								.bg_height * (that.list[i].y_axis_bl), that.list[i].qr_width,
								that.list[i].qr_height
							) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							// #endif
							// #ifdef H5 || APP-PLUS
							ctx.drawImage(that.canvasQrPath, that.canvasWidth * (that.list[i]
									.x_axis_bl), that
								.canvasHeight * (that.list[i].y_axis_bl), that.list[i].qr_width,
								that.list[i].qr_height
							) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							// #endif

							ctx.save(); //保存
							ctx.draw() //绘制
						}
					})
				}

			},
		}
	}
	// #endif
	// #ifdef MP-WEIXIN
	import rCanvas from "./components/r-canvas/r-canvas.vue"
	export default {
		components: {
			rCanvas
		},
		data() {
			return {
				imageurl: '',
				ercode: '',
				scrollheight: 0,
				loading: true,
				text: ''
			};
		},
		onReady() {
			this.$refs.uqrcode.toTempFilePath({
				success: res => {
					uni.showLoading({

					})
					this.ercode = res.tempFilePath
				}
			});


			setTimeout(() => {

				this.$nextTick(async () => {

					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas"
					})
					// 例子：
					this.$refs.rCanvas.setCanvasHeight(this.scrollheight)
					// 画图
					await this.$refs.rCanvas.drawImage({
						// #ifdef H5
						url: image2,
						// #endif
						// #ifndef H5
						url: this.imgbox[0],
						// #endif
						// #ifdef APP
						url: image2,
						// #endif
						x: 0,
						y: 0,
						w: 375,
						h: 812
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawImage({
						url: this.ercode,
						x: 112,
						y: 340,
						w: 150,
						h: 150
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						//res.tempFilePath：生成成功，返回base64图片
						this.imageurl = res.tempFilePath
						uni.hideLoading()
					})
				})
			}, 1200)
		},
		onLoad(Option) {
			this.scrollheight = uni.getWindowInfo().windowHeight
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					this.text = res.data
					this.canvasQrPath = this.$fun.baseUrl() + res.data
				}
			})
			// this.text = Option.shareLink
			this.$fun.ajax.post('/config/invitation', {}).then(res => {
				if (res.code == 1) {
					let data = []
					res.data.forEach((item) => {
						data.push(this.$fun.imgUrl(item.image))
					})
					this.imgbox = data
					this.list = res.data
				}
			})
		},
		methods: {
			longpress() {
				// 保存图片
				// #ifdef H5
				var createA = document.createElement("a");
				createA.download = this.imageurl;
				createA.href = this.imageurl;
				document.body.appendChild(createA);
				createA.click();
				createA.remove();
				// resolve()
				// #endif
				// #ifndef H5
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: (res) => {
						if (res.confirm) {
							if (!this.imageurl) {
								reject("FilePath cannot be null:101")
								return;
							}



							uni.saveImageToPhotosAlbum({
								filePath: this.imageurl,
								success: (res) => {
									this.$fun.msg('已保存')
								},
								fail: (err) => {

								}
							})
						} else if (res.cancel) {

						}
					}
				});
				// #endif
			},
		}
	}
	// #endif
</script>

<style lang="scss">
	/* #ifndef MP-WEIXIN */

	.img_box {
		position: fixed;
		bottom: 50rpx;
		width: 80%;
		display: flex;
		justify-content: space-around;
		z-index: 100;
		left: 0;
		right: 0;
		margin: auto;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.swiper-3d {
		padding: 0upx;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;

		.s-container {
			height: 900upx;
			width: 100%;

			.swiper-item {
				// max-width: 630upx;
				height: 90%;
				padding: 0upx 20upx;
				box-sizing: border-box;
				position: relative;

			}

			.item-img {
				// position: absolute;
				margin-top: 30upx;
				width: 100%;
				height: 80%;
				// border-radius: 15upx;
				z-index: 5;
				// opacity: 0.7;
				// top: 7%;
				// transform: translateY(-50%);
				// box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
			}

			.active {
				opacity: 1;
				z-index: 10;
				height: 90%;
				top: -3%;
				transition: all .1s ease-in 0s;
				transform: translateY(0);
			}
		}

		.swiper-dot {
			display: flex;
			justify-content: center;
			align-items: center;

			// padding-top: 10upx;
			.dot {
				margin: 0 10upx;
				width: 15upx;
				height: 15upx;
				border-radius: 50%;
				background: #bbb;

				&.on {
					background: #F4BD48;
				}
			}
		}
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */
	.showservice1 {
		image {
			width: 750rpx;
			height: 100%;
		}
	}

	.model1 {
		position: fixed;
		top: 5%;
		left: 75rpx;

		.del {
			width: 53rpx;
			height: 53rpx;
			position: absolute;
			bottom: -80rpx;
			left: 254rpx;
		}

		.code {
			position: absolute;
			right: 20rpx;
			bottom: 26rpx;
		}
	}

	/* #endif */
</style>